<template >
  <div v-if="!loading">
  </div>
  <div class="load-bigbox" v-else>
      <div class="load-box">
  <div class="load-top">
      <img :src='logina' alt="" class="imga">
  </div>

  <div class="load-con">
  <img :src=loginb class="imgb" @click="tuto">
  <img :src=loginc alt="" class="imgc" @click="login">
  </div>
      </div>
 
   
   <!-- 教程 -->
   <div class="vide-box" v-show="videoA">
          <Video class="video-bigbox"></Video>
          <!-- <div class="close" @click="videoA = false">
      <span class="iconfont icon-cuohao"></span>
   </div> -->
   </div>

   
<!-- 登陆弹窗 -->
<div v-show="show" class="login-pop">
  <!-- <div class="close" @click="show = false">
      <span class="iconfont icon-cuohao"></span>
   </div> -->
  <div class="img-box">
 <img :src="loginbj" alt="" class="LoginImg">
 <div class="img-con">
  <h3>登陆</h3>
   <input type="username" placeholder="请输入用户名" v-model="user.username">
   <input type="password" placeholder="请输入密码"   v-model="user.password">
   <button @click="loginA" style="cursor: pointer;">登陆</button>
 </div>
  </div>
</div>



  </div>


</template>

<script setup>
import {ref,onMounted,reactive} from 'vue'
import { useRouter } from 'vue-router'
import Video from './video.vue'
import  logina from '@/assets/images_slices/login(4).png'
import  loginb from '@/assets/images_slices/loginbj(3).png'
import  loginc from '@/assets/images_slices/loginbj(4).png'
import  loginbj from '@/assets/images_slices/loginbj.png'
import loginBig from '@/assets/images_slices/loginbj(1).png'
import loadbj from '@/assets/images_slices/loadbj.png'
import jiazai from '@/assets/images_slices/jiazai.png'
import loadAing from '@/assets/images_slices/loading.png'
import loadPop  from '@/assets/images_slices/loadpop.png'

let router = useRouter()

let show = ref(false)
let videoA = ref(false)

//加载
let loading= ref(false)

let user= reactive({
  username:'',
  password:''
})


const login = ()=>{
  let token = localStorage.getItem('token')
  if(token){
      router.push('/load')
  }else{
      show.value = !show.value
  }
}




const loginA = ()=>{
  console.log('登陆')
  if(user.username && user.password){
    localStorage.setItem('token',user.username)
    router.push('/load')
  }else{
    ElMessage({
    message: '请输入用户名或密码',
    type: 'warning',
  })
  }
}

//教程
const tuto = ()=>{
  console.log('教程')
  videoA.value = !videoA.value
}

//预加载图片
onMounted(() => {  
  const preloadImages = [logina, loginb, loginc,loginbj,loginBig,loadbj,jiazai,loadAing,loadPop].map(src => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = src;  
      img.onload = () => resolve(img);
      img.onerror = (error) => {  
        reject(new Error(`图片加载失败: ${src}`));
      };  
    });  
  });  
  
  Promise.all(preloadImages).then(() => {  
    console.log('所有图片预加载完成');  
    loading.value = true;
  }).catch(error => {  
    console.error('图片预加载失败', error.message);  
  });  
});

onMounted(()=>{ //双击登陆弹窗之外的页面关闭弹框
  document.addEventListener('click',(e)=>{
    // console.log(e.target.className)
    if(e.target.className=='login-pop'){
      show.value = false
     
    }
  
  })
  document.addEventListener('click',(e)=>{
    if( e.target.className!='vide-box' && e.target.className!='video-bigbox' && e.target.className!='imgb' && e.target.className!=''){
      videoA.value = false
    }
  })
})



</script>
<style scoped lang="less">
.load-bigbox {  
  width: 100%;  
  height: 100%;  
  background-image: url('@/assets/images_slices/loginbj(1).png');
  background-size: cover;  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
  align-items: center; 
  position: relative;
}  
  
.load-box {  
  width: 70%; 
  overflow: hidden;
}  
  
.load-con {  
  width: 100%;  
  height: 56%;  
  margin-top: 50px;
  display: flex;  
  justify-content: center;  
  align-items: center;
  position: relative;
  img { 
    width: 50%;
    // border: 1px solid #fff;
    max-width: 70%;
    height: 100%;
    display: block; 
    object-fit: contain;   
    cursor: pointer;  
  }  
}  
  
.load-top {  
  width: 100%;  
  height: 25%; 
  display: flex;  
  justify-content: center;
  align-items: center;  
  img {  
    width: 25%;
    max-width: 25%;  
    height: auto;  
    display: block;  
    object-fit: contain;
  }  
}  
  
.vide-box {  
  width: 80%;  
  // height: 80%;  
  aspect-ratio: 16/9;
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}  
  
.close {  
  color: black;  
  position: absolute;
  top: 2%;  
  right: 2%;  
  cursor: pointer;  
  z-index: 999;  
  span {  
    font-size: 50px;  
  }  
}  
  

@media screen and (max-width: 468px) {  
  .load-bigbox  {  
    width: 468px;    
  }  
}
@media screen and (max-height: 530px) {  
  .load-bigbox  {  
    height: 530px;
    overflow-x: hidden;  
  }
}


.login-pop{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  cursor: pointer;
    .img-box{
  width: 25%;
   aspect-ratio: 1/1;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  img{
         width: 100%;
         height: 100%;
         object-fit: contain;
        }
      .img-con{
        width: 75%;
        height:60%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

       
        h3{
          width: 80%;
          font-size: 1.8vw;
          color: black;
          text-align: center;
        }
        input{
          width: 80%;
          height: 10%;
          outline: none;
          border: none;
          background: none;
          border-bottom: 1px solid #000;
          font-size: 1vw;
        }
        button{
          width: 80%;
          height: 15%;
          font-size: 1vw;
          border: 1px solid #fff;
          background: orange;
          color: white;
        }
      }

    }
  }


</style>